/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
    Alert,
    ImageBackground,
    TouchableOpacity,
} from 'react-native';
import LoginButton from '../ui/loginButton';
import LoginInput from '../ui/loginInput';
import pxToDp from '../config/pxToDp';
const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menus',
    android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menus ',
});
var Dimensions = require('Dimensions');
var { width, height } = Dimensions.get('window');


export default class AccountLoginScene extends Component {

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={{ height: height, paddingBottom: 20 }}>
                <ImageBackground style={styles.backg} source={require('../imgs/Screenshot.png')}>
                    
                    <View style={styles.container}>
                        <View style={styles.three}>
                            <LoginButton
                                btnText="登陆"
                                login={()=>{
                                    this.props.navigation.replace('phoneLogin')
                                }}>
                            </LoginButton>
                        </View>
                        <View style={styles.three}>
                            <LoginButton
                                btnText="注册"
                                login={()=>{
                                    this.props.navigation.replace('registerScene')
                                }}>
                            </LoginButton>
                        </View>
                        <View style={styles.four}>
                            <Text style={styles.instructions}
                                onPress={findPwd}
                            > 
                                找回密码 | &nbsp;
                            </Text>
                                <Text style={styles.instructions}
                                    onPress={callService}>
                                    联系客服
                            </Text>
                        </View>
                    </View>
                    
                    
                </ImageBackground>
            </View>
            
        );
    }
}

check = () => {
    Alert.alert("登陆q")
}

findPwd = () => {
    Alert.alert("找回密码")
    
}

callService = () => {
    Alert.alert("联系客服")
}

const styles = StyleSheet.create({
    backg:{
        flex: 1,
        justifyContent:"flex-end",
    },
    container: {
        height:250,
        // justifyContent: "space-between",
        flexDirection: 'column',
        // justifyContent: 'center',
        padding: 20,
    },
    one: {
        flex: 2,
        // alignItems: 'flex-end',
    },
    title: {

        fontSize: 26,
        textAlign: 'center',
        alignItems: 'center',
        margin: 10,
        color: '#333333',
    },
    two: {
        flexDirection: 'row',
        flex: 2,
    },
    twoFirstChild: {
        flexDirection: 'column',
        flex: 1,
    },
    otherSuiliao: {
        // justifyContent: 'flex-start',
        // flex: 1,
        color: '#0074D9',
        height: 20,
    },
    other: {
        alignItems: 'flex-start',
        flex: 1,
    },
    three: {
        marginTop:10,
        flexDirection: 'row',
        height:50,
    },

    four: {
        flexDirection: 'row',
        flex: 2,
        justifyContent: 'center',
        alignItems: 'flex-end',
    },

    instructions: {
        height: 20,
        color: '#0074D9',
        alignItems: 'center',
    },


});
